<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" ref="filters" :size="size">
        <el-row class="search-input">
          <el-form-item prop="storeName" label="店铺名称：">
            <el-input v-model="filters.storeName" placeholder="店铺名称"></el-input>
          </el-form-item>
          <el-form-item prop="status" label="请选择时间段：">
            <el-select v-model="filters.status" placeholder="请选择时间段" @change="timeChange">
              <el-option
                v-for="item in status"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-refresh"
              :label="$t('action.reset')"
              type="primary"
              @click="resetForm('filters')"
            />
          </el-form-item>
          <el-form-item>
            <kt-button label="评价设置" type="primary" @click="setScore()"/>
          </el-form-item>
        </el-row>
        <el-form-item class="t_r w100">
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item>
        <!--表格显示列界面-->
        <table-column-filter-dialog
          ref="tableColumnFilterDialog"
          :columns="columns"
          @handleFilterColumns="handleFilterColumns"
        ></table-column-filter-dialog>
      </el-form>
    </div>
    <!--表格内容栏-->
    <Jic-table
      :height="350"
      :tableList="pageResult"
      :tableHeaderList="filterColumns"
      @findPage="findPage"
      @selectionChange="selectionChange"
      :showBatchDelete="false"
      showDetailOperation
      :showDeleteOperation="false"
      :showIndex="false"
      @handleDetail="handleDetail"
      :totalSize="totalSize"
      @handlePageChange="handlePageChange"
      ref="JicTable"
    ></Jic-table>
    <!--评价设置-->
    <el-dialog title="评价设置" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <div class="tag">商家评价综合评分计算公式=商品平均数*A+服务平均数*B+物流平均数*C
        <br>平均数计算公式=∑（各个分数*评分人数占比）
      </div>
      <el-form
        :model="dataForm"
        label-width="150px"
        ref="dataForm"
        :size="size"
        label-position="right"
      >
        <el-row class="searchDialog-input">
           <el-form-item label="A=商品评论系数=：" prop="productVal">
          <el-input
            v-model="dataForm.productVal"
            type="number"
            min="0"
            max="0.9"
            auto-complete="off"
            placeholder="请输入A=商品评论系数"
          ></el-input>
        </el-form-item>
        <el-form-item label="B=服务评论系数=：" prop="serviceVal">
          <el-input
            v-model="dataForm.serviceVal"
            type="number"
            min="0"
            max="0.9"
            auto-complete="off"
            placeholder="请输入B=服务评论系数"
          ></el-input>
        </el-form-item>
        <el-form-item label="C=物流评分系数=：" prop="logisticsVal">
          <el-input
            v-model="dataForm.logisticsVal"
            type="number"
            min="0"
            max="0.9"
            auto-complete="off"
            placeholder="请输入C=物流评分系数"
          ></el-input>
        </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="dialogVisible = false">
          {{
          $t("action.cancel")
          }}
        </el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
        >{{ $t("action.submit") }}</el-button>
      </div>
    </el-dialog>
    <!--评价详情-->
    <el-dialog
      title="店铺评分详情"
      width="60%"
      :visible.sync="dialogVisibleDetail"
      :close-on-click-modal="false"
    >
      <div style="font-size: 13px; color: grey;">店铺评价数据次日进行统计更新</div>
      <div class="up-content">
        <span class="personal">人数：{{this.totalSizes}}</span>
        <span>时间范围：近180日</span>
      </div>
      <template>
        <el-table :data="tableMemberData" style="width: 100%">
          <el-table-column prop="storeName" label="店铺名称" width="180"></el-table-column>
          <el-table-column prop="overallRating" label="综合评分" width="180"></el-table-column>
          <el-table-column prop="serviceRating" label="服务评分"></el-table-column>
          <el-table-column prop="logisticsScore" label="物流评分"></el-table-column>
          <el-table-column prop="productRating" label="商品评分"></el-table-column>
        </el-table>
        <div>
          <label class="evalu-title">评价历史记录{{this.totalSizes}}</label>
        </div>
      </template>
      <div>
        <Com-table
          :height="350"
          :tableList="pageResults"
          :tableHeaderList="commonfilters"
          @findPage="findPages"
          :showOperation="false"
          :showDeleteOperation="false"
          :showSelection="false"
          :totalSize="totalSizes"
          @handlePageChange="handlePageChange"
          ref="ComTable"
        ></Com-table>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="dialogVisibleDetail = false">
          {{
          $t("action.cancel")
          }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import JicTable from "@/components/jicComponentGallery/jicTable";
import ComTable from "@/components/jicComponentGallery/jicTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { format } from "@/utils/datetime";
import utils from "@/assets/js/utils.js";
export default {
  components: {
    PopupTreeInput,
    JicTable,
    ComTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      totalSizes: 0, //初始化
      totalSize: 0, //初始化列表分页
      size: "small",
      tableMemberData: [],
      tableData: [],
      status: [
        { key: "0", value: "近180日" },
        { key: "1", value: "近90日" },
        { key: "2", value: "近30日" }
      ],
      filters: {
        storeName: "",
        startTime: "",
        endTime: ""
      },
      columns: [],
      filterColumns: [],
      commonfilters: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: [],
      pageResults: [],

      operation: false, // true:新增, false:编辑
      dialogVisible: false, // 新增编辑界面是否显示
      dialogVisibleDetail: false, //评价详情
      editLoading: false,
      // 新增编辑界面数据
      dataForm: {
        productVal: "",
        serviceVal: "",
        logisticsVal: ""
      }
    };
  },

  methods: {
    // 获取分页数据
    findPage: function(data) {
      if (data != null && data.start != null) {
        if (data.start != null) {
          this.pageRequest.pageNum = data.start;
        }
        if (data.limit != null) {
          this.pageRequest.pageSize = data.limit;
        }
      }

      let this_ = this;
      if (this_.filters == undefined || this_.filters == null) {
        this_.filters = {};
      }
      this_.filters.start = this.pageRequest.pageNum;
      this_.filters.limit = this.pageRequest.pageSize;
      this_.utils.request.queryStoreRatingList(this_.filters, function(res) {
        this_.pageResult = res.data.rows;
        this_.totalSize = Number(res.data.total);
      });
    },

    //获取详情分页数据
    findPages: function(data) {
      if (data != null && data.start != null) {
        if (data.start != null) {
          this.pageRequest.pageNum = data.start;
        }
        if (data.limit != null) {
          this.pageRequest.pageSize = data.limit;
        }
      }

      let this_ = this;
      let params = {};
      params.start = this.pageRequest.pageNum;
      params.limit = this.pageRequest.pageSize;
      this_.utils.request.getStoreCommentList(this_.filters, function(res) {
        this_.pageResults = res.data.rows;
        this_.totalSizes = Number(res.data.total);
      });
    },

    //获取详情列表
    handleDetail: function(row) {
      console.log(row);
      this.dialogVisibleDetail = true;
      this.initComColumns();

      this.tableMemberData[0] = row.row;
      let this_ = this;
      let params = {};
      params.storeId = row.row.storeId;
      params.start = this.pageRequest.pageNum;
      params.limit = this.pageRequest.pageSize;
      this_.utils.request.getStoreCommentList(params, function(res) {
        this_.pageResults = res.data.rows;
        this_.totalSizes = Number(res.data.total);
      });
    },

    //选取时间查询
    timeChange(val) {
      let this_ = this;

      if (val == "0") {
        let n = 180;
        let d = new Date();
        let year = d.getFullYear();
        let mon = d.getMonth() + 1;
        let day = d.getDate();
        if (day <= n) {
          if (mon > 1) {
            mon = mon - 1;
          } else {
            year = year - 1;
            mon = 12;
          }
        }
        d.setDate(d.getDate() - n);
        year = d.getFullYear();
        mon = d.getMonth() + 1;
        day = d.getDate();
        this_.filters.startTime =
          year +
          "-" +
          (mon < 10 ? "0" + mon : mon) +
          "-" +
          (day < 10 ? "0" + day : day);
        let now = new Date();
        this_.filters.endTime =
          now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
      } else if (val == "1") {
        let n = 90;
        let d = new Date();
        let year = d.getFullYear();
        let mon = d.getMonth() + 1;
        let day = d.getDate();
        if (day <= n) {
          if (mon > 1) {
            mon = mon - 1;
          } else {
            year = year - 1;
            mon = 12;
          }
        }
        d.setDate(d.getDate() - n);
        year = d.getFullYear();
        mon = d.getMonth() + 1;
        day = d.getDate();
        this_.filters.startTime =
          year +
          "-" +
          (mon < 10 ? "0" + mon : mon) +
          "-" +
          (day < 10 ? "0" + day : day);
        let now = new Date();
        this_.filters.endTime =
          now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
      } else if (val == "2") {
        let n = 30;
        let d = new Date();
        let year = d.getFullYear();
        let mon = d.getMonth() + 1;
        let day = d.getDate();
        if (day <= n) {
          if (mon > 1) {
            mon = mon - 1;
          } else {
            year = year - 1;
            mon = 12;
          }
        }
        d.setDate(d.getDate() - n);
        year = d.getFullYear();
        mon = d.getMonth() + 1;
        day = d.getDate();
        this_.filters.startTime =
          year +
          "-" +
          (mon < 10 ? "0" + mon : mon) +
          "-" +
          (day < 10 ? "0" + day : day);
        let now = new Date();
        this_.filters.endTime =
          now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
      }

      console.log(
        "开始时间:" +
          this_.filters.startTime +
          "-------" +
          "结束时间:" +
          this_.filters.endTime
      );
    },

    //左右分页点击

    handlePageChange(params) {
      if (params != null && params.number != null) {
        if (params.number != null) {
          this.pageRequest.pageNum = params.number;
        }

        this.findPage();
      }
    },
    selectionChange: function(params) {},
    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },
    // 处理表格列过滤显示
    displayFilterColumnsDialog: function() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    // 处理表格列过滤显示
    initColumns: function() {
      this.columns = [
        { prop: "storeName", label: "店铺名称", minWidth: 120 },
        { prop: "overallRating", label: "综合评分", minWidth: 120 },
        { prop: "productRating", label: "商品评分", minWidth: 120 },
        { prop: "serviceRating", label: "服务评分", minWidth: 150 },
        { prop: "logisticsScore", label: "物流评分", minWidth: 120 },
        { prop: "orderNum", label: "订单数", minWidth: 120 }
      ];
      var temp = [];
      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    },

    // 处理表格列过滤显示
    initComColumns: function() {
      this.columns = [
        { prop: "memberName", label: "会员名称", minWidth: 120 },
        { prop: "overallRatings", label: "综合评分", minWidth: 120 },
        { prop: "productRatings", label: "商品评分", minWidth: 120 },
        { prop: "serviceRatings", label: "服务评分", minWidth: 150 },
        { prop: "logisticsScores", label: "物流评分", minWidth: 120 },
        { prop: "orderNo", label: "订单编号", minWidth: 120 }
      ];
      var temp = [];
      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.commonfilters = temp;
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.filters = {};
      this.findPage();
    },
    //设置规则弹窗
    setScore() {
      this.dialogVisible = true;
      this.dataForm = {};
    },

    // 新增修改回调
    editInfoBack: function(data) {
      if (data.code == "0000") {
        this.$message({ message: "操作成功", type: "success" });
        this.dialogVisible = false;
        this.$refs["dataForm"].resetFields();
      } else {
        this.$message({ message: "操作失败, " + data.msg, type: "error" });
      }
      this.findPage();
      this.dialogVisible = false;
      this.operation = false;
      this.editLoading = false;
    },
    submitForm() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          let params = Object.assign({}, this.dataForm);
          let num =
            Number(params.productVal) +
            Number(params.serviceVal) +
            Number(params.serviceVal);
          if (num > 1) {
            this.$message({
              message: "操作失败,规则系数和不能大于1 ",
              type: "error"
            });
            return;
          }
          console.log(params, "------------");
          this.utils.request.updateSysConfigInfoByKey(
            params,
            this.editInfoBack
          );
        }
      });
    }
  },
  mounted() {
    this.initColumns();
    this.findPage();
  }
};
</script>

<style scoped lang='scss'>
/deep/.el-input__inner {
  width: 200px !important;
}

/deep/.detail {
  float: left;
}
</style>